<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        统计分析
        <small>男女会员占比</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>男女会员占比</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberRate: {
        legendData: [],
        seriesData: [],
      },
    };
  },
  mounted: function () {
    var myChart1 = this.$echarts.init(document.getElementById("chart1"));
    let that = this;
    this.$http.get("api/member/selectMemberSexPercent").then((res) => {
      that.memberRate = res.data.data;
      myChart1.setOption({
        title: {
          text: "男女会员占比",
          subtext: "",
          x: "center",
        },
        tooltip: {
          //提示框组件
          trigger: "item", //触发类型，在饼形图中为item
          formatter: "{a} <br/>{b} : {c} ({d}%)", //提示内容格式
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: that.memberRate.legendData,
        },
        series: [
          {
            name: "男女会员占比",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: that.memberRate.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    });
  },
};
</script>